<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
  <head>
    <meta name="generator"
    content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org" />
    <meta http-equiv="CONTENT-TYPE" content="text/html; charset=utf-8" />
    <title>@APPNAME@ User&#39;s Guide, version @VERSION@, 3. An Overview of @APPNAME@</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="default.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
 div.c7 {font-size: 80%; text-align: right}
 div.c6 {text-align: center}
 h4.c5 {margin-left: 20px;}
 div.c4 {margin-left: 20px;}
 p.c3 {font-weight: bold}
 div.c2 {margin-left: 20px;}
 li.c1 {list-style: none}
</style>
  </head>
  <body lang="en-US">
    <table border="0" width="100%">
      <tr>
        <td align="left">@APPNAME@ User&#39;s Guide</td>
        <td align="right">
        <a href="#top">Top</a> | 
        <a href="Guide.html">Table of Contents</a> | 
        <a href="Guide2.html">Previous</a> | 
        <a href="Guide4.html">Next</a> | 
        <a href="TopicIndex.html">Topic Index</a></td>
      </tr>
    </table>
    <hr />
    <a name="top"></a>
    <h2>
      <a name="sec-3">3. An Overview of 
      <i>@APPNAME@</i></a>
    </h2>
    <h3>
      <a name="sec-3.1">3.1 The Main Window</a>
    </h3>
    <div class="c2">
      <p>The main window of 
      <i>@APPNAME@</i> is shown below:</p>
      <p>
        <img src="images/Windows/main-window.png" border="0" />
        <br clear="left" />
        
      </p>
      <p>The main window consists of the following components:</p>
      <ul>
        <li>The 
        <i>canvas area</i>, which is the area for drawing diagrams. The canvas area consists of 
	one or more tabs, where each tab corresponds to an opened diagram. 
	The different opened diagrams can be selected using the tabs.
	<p>
          <img src="images/Windows/canvas.png" border="0" />
	</p>
	</li>
        <li>The 
        <i>tool bar</i>, which contains tools that are shortcuts for common tasks, including
        tools for inserting various types of shapes and manipulating exiting shapes. 
	[see <a href="#3.2">3.2</a>]
        <p>
          <img src="images/Windows/toolbar.png" border="0" />
	</p>
	</li>

        <li>The <i> breadcrumb bar</i>, 
	  which display the trail of current project, folders, and diagram. 
	  It can also be used to select the project and diagram to work on.
	  [see <a href="#3.3">3.3</a>]
        <p>
        <img src="images/Windows/breadcrumb.png" border="0" />
	</p>
	</li>

        <li>The <i>menu bar</i>, which contains menus that provide access to all the
        functionalities of the tool. 
	[see <a href="#3.4">3.4</a>]
        <p>
        <img src="images/Windows/menubar1.png" border="0" />
        &nbsp;&nbsp;&nbsp;
        <img src="images/Windows/menubar2.png" border="0" />
	</p>
	</li>

        <li>The <i>navigator</i> panel, which contains a 
          <i>project</i> tab and a 
          <i>diagram</i> tab. The project tab displays a list of opened projects and
          the diagrams contained in each project. 
          <p>
            <img src="images/Windows/navigator-project.png" border="0" />
	  </p>

	  The diagram tab displays two views of
          the contents of the current diagrams shown in the canvas: 
	  the <i>graph</i> view and
          the <i>shapes</i> view. Each view can be selected using the tab at the top.

          <table>
            <tr>
	      <td>
                <img src="images/Windows/navigator-graph.png"
                     name="avm-doc-graph" border="0" />
	      </td>
	      <td></td>
	      <td>
                <img src="images/Windows/navigator-shapes.png" border="0" />
	      </td>
            </tr>
            <tr>
	      <td>a) the graph view</td>
	      <td>&nbsp;&nbsp;&nbsp;</td>
	      <td>b) the shapes view</td>
            </tr>
          </table>
        </li>
        <li>The 
        <i>attribute inspector</i> panel, which displays two views of the
        attributes of the currently selected shape in the canvas: the model,
        i.e., semantic, attributes and the visual attributes.
        <table>
          <tr>
            <td>
              <img src="images/Windows/attribute-model.png"
		   border="0" />
            </td>
            <td></td>
            <td>
              <img src="images/Windows/attribute-visual.png"
		   border="0" />
            </td>
          </tr>
          <tr>
            <td>a) the model attributes</td>
            <td>&nbsp;&nbsp;&nbsp;</td>
            <td>b) the visual attributes.</td>
          </tr>
        </table>
	</li>
        <li>The 
          <i>templates</i> panel, which displays a set of pre-defined templates
          for various types of diagrams.
          <p>
            <img src="images/Windows/templates.png" border="0" />
	  </p>
	</li>
        <li>The 
          <i>stencil</i> panel, which displays a set of user customizable
          stencils for common shapes in various types of drawing.
          <p>
            <img src="images/Windows/stencils.png" border="0" />
	  </p>
	</li>
        <li>The <i>status bar</i>, which consist of the following:
          <ul>
            <li>The 
              <i>zoom slide</i>,
	      which allows one to zoom in and out to view the diagrams to different scales. 
              <p>
		<img src="images/Windows/zoom.png" border="0" />
	      </p>
	    </li>
            <li>The 
              <i>information icons</i>, which display information about the current
              diagrams. [see <a href="#3.5">3.5</a>].
              <p>
		<img src="images/Windows/info.png" border="0" />
	      </p>
	    </li>
            <li>The 
              <i>message bar</i>, which displays the status information and context
              sensitive help messages.
              <p>
		<img src="images/Windows/message.png" border="0" />
	      </p>
	    </li>
            <li>The 
              <i>location indicator</i>, which displays the current location of the
              mouse pointer in the canvas.
              <p>
		<img src="images/Windows/location.png" border="0" />
	      </p>
	    </li>
          </ul>
	</li>
      </ul>
    </div>
    <h3>
      <a name="sec-3.2">3.2 The Tool Bar</a>
    </h3>
    <div class="c2">
      <p>The tool bar contains a series of tool buttons, which can be organized
	into the following groups:</p>
      <div class="c4">
        <p class="c3">Menu item shortcuts</p>
        <table border="0" cellpadding="2" cellspacing="0" width="666">
          <tbody>
            <tr>
              <td width="64">
                <img src="images/Icons/new.gif" name="new" align="bottom"
                border="0" />
              </td>
              <td width="625">Create a new diagram.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/open.gif" name="open" align="bottom"
                border="0" />
              </td>
              <td width="625">Open an existing diagram.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/save.gif" name="save" align="bottom"
                border="0" height="16" width="16" />
              </td>
              <td width="625">Save the current diagram.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/print.gif" name="print" align="bottom"
                border="0" />
              </td>
              <td width="625">Print the current diagram.</td>
            </tr>
          </tbody>
        </table>
        <p class="c3">Editing tools</p>
        <table border="0" cellpadding="2" cellspacing="0">
          <tbody>
            <tr>
              <td width="64">
                <img src="images/Icons/point.png" name="Graphic2"
                alt="point tool icon" align="bottom" border="0" />
              </td>
              <td>The 
              <i>point</i> tool for selecting, moving, resizing, and editing
              various shapes.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/group.png" align="bottom" border="0" />
              </td>
              <td>The 
              <i>grouping</i> tool for grouping a number of shapes so that they
              can be moved and copied as a whole.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/trash.gif" align="bottom" border="0" />
              </td>
              <td>The 
              <i>deletion</i> tool for deleting shapes from a diagram.</td>
            </tr>
          </tbody>
        </table>
        <p class="c3">Tools for inserting shapes</p>
        <table border="0" cellpadding="2" cellspacing="0" width="666">
          <tbody>
            <tr>
              <td width="64">
                <img src="images/Common/line.png" 
                alt="line tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a new line segment.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/arc.png" 
                alt="arc tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a quadratic curve.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/curve.png" 
                alt="curve tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a cubic curve.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/polyline.png" 
                alt="poly-line tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a poly-line.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/polycurve.png" 
                alt="poly-curve tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a poly-curves, which consists
              of multiple cubic curve segments.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/orthline.png" 
                alt="orthogonal line tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting an orthogonal line.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/rect.png" 
                alt="rectangle tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a rectangle.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/oval.png" 
                alt="ellipse tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting an ellipse.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/rrect.png" 
                alt="round-cornered rectangle tool icon" align="bottom"
                border="0" />
              </td>
              <td width="625">Tool for inserting a round-cornered
              rectangle.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/circle.png" 
                alt="circle tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a circle.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/polygon.png" alt="polygon tool icon"
                align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a polygon.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/triangle.png" align="bottom"
                border="0" />
              </td>
              <td width="625">Tool for inserting a triangle.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/diamond.png" align="bottom"
                border="0" />
              </td>
              <td width="625">Tool for inserting a diamond.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/trapezoid.png" align="bottom"
                border="0" />
              </td>
              <td width="625">Tool for inserting a trapezoid.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Common/parallelogram.png" 
                align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a parallelogram.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/image.png" align="bottom" border="0" />
              </td>
              <td width="625">Tool for inserting a raster image in GIF, PNG, or
              JPEG format.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/svgimage.png" align="bottom"
                border="0" />
              </td>
              <td width="625">Tool for inserting a vector image in SVG
              format.</td>
            </tr>
            <tr>
              <td width="64">
                <img src="images/Icons/text.png" 
                alt="text tool icon" align="bottom" border="0" />
              </td>
              <td width="625">Text editing tool for inserting and editing
              text.</td>
            </tr>
          </tbody>
        </table>
        <p class="c3">Tools for Setting Attributes</p>
        <table border="0" cellpadding="2" cellspacing="0" width="666">
          <tbody>
            <tr>
              <td width="100">
                <img src="images/Common/colorsel.png" 
                alt="color" align="bottom" border="0" />
              </td>
              <td width="625">Color selection tool for changing the default
		foreground (border) colors of shapes.</td>
            </tr>
            <tr>
              <td width="100">
                <img src="images/Common/fillsel.png" alt="fill" align="bottom"
                border="0" />
              </td>
              <td width="625">Fill color and gradient selection tool for
		changing the fill color or gradient pattern for the background of
		shapes.</td>
            </tr>
            <tr>
              <td width="100">
                <img src="images/Common/linesel.png" alt="line style"
                align="bottom" border="0" />
              </td>
              <td width="625">Line and arrow style selection tools for changing
              the default line and arrow styles.</td>
            </tr>
            <tr>
              <td width="100">
                <img src="images/Common/jointsel.png" alt="joint/cap"
                align="bottom" border="0" />
              </td>
              <td width="625">Joint and cap style selection tools for changing
              the default cap and joint styles of lines.</td>
            </tr>
            <tr>
              <td width="100">
                <img src="images/Common/fontsel.png" alt="fontsel"
                align="bottom" border="0" />
              </td>
              <td width="625">Font selection tool for changing the default font
              families and styles for text shapes.</td>
            </tr>
            <tr>
              <td width="100">
              <img src="images/Icons/text-bold.png" alt="bold" align="bottom"
              border="0" /> 
              <img src="images/Icons/text-italic.png" alt="italic"
              align="bottom" border="0" /> 
              <img src="images/Icons/text-underline.png" alt="underline"
              align="bottom" border="0" /></td>
              <td width="625">
              Text style tools for changing the default font styles for
              text shapes.</td>
            </tr>
            <tr>
              <td width="100">
              <img src="images/Icons/align-left.gif" alt="left" align="bottom"
              border="0" /> 
              <img src="images/Icons/align-center.gif" alt="center"
              align="bottom" border="0" /> 
              <img src="images/Icons/align-right.gif" alt="right"
              align="bottom" border="0" /></td>
              <td width="625">Text alignment tools for changing the default
              alignment settings of text boxes.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <p>The tools on the tool bar can be selected by clicking the left mouse
      button on the corresponding tool icons. Only one tool can be selected at
      any time.</p>
    </div>

    <h3>
      <a name="sec-3.3">3.3 The Breadcrumb Bar</a>
    </h3>

    <div class="c2">
      <p>
	The breadcrumb bar provides two functions. First it displays the trail of current project, 
	folders, and diagram. Second, it can also be used to select a different project, folder, 
	or diagram to work on by clicking on the ‘>’ symbol before each of the items in the trail, 
	as shown below.
      </p>
      <div class="c4">
         <table border="0" cellpadding="2" cellspacing="0">
          <tbody>
	    <tr>
	      <td>
		<img src="images/Windows/breadcrumb2.png" align="bottom" border="0" /> 
	      </td>
	    </tr>
	    <tr>
	      <td>a) Selecting a different diagram from the current folder. 
		The current diagram is highlighted.
	      </td>
	    </tr>
	    <tr>
	      <td>
		<img src="images/Windows/breadcrumb3.png" align="bottom" border="0" /> 
	      </td>
	    </tr>
	    <tr>
	      <td>b) Selecting a different folder from the current project. 
		The current folder id highlighted. 
	      </td>
	    </tr>
	    <tr>
	      <td>
		<img src="images/Windows/breadcrumb4.png" align="bottom" border="0" /> 
	      </td>
	    </tr>
	    <tr>
	      <td>c) Selecting a different project. The current project is highlighted.  
	      </td>
	    </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h3>
      <a name="sec-3.4">3.4 The Menu Bar</a>
    </h3>

    <div class="c2">
      <p>The features that can be accessed through the menus in the menu bar
      are summarized below.</p>
      <h4 class="c5">The File Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>New diagram</b>
              </td>
              <td width="12"></td>
              <td>Start a new diagram.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Open diagram</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Load a diagram previously saved in a file. A file
              dialog will pop up for choosing the file to be loaded.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Save diagram</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Save the current diagram to its current file.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Save diagram as</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Save the current diagram to a different file. A
              file dialog will pop up for choosing the new file name.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Export model</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Export the model of the current UML diagram to
              XML.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Export image</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Export the current diagram to one of the
              supported graphics formats. Use the sub-menus to indicate the
              file format, which can be of the following: SVG, PDF, 
              GIF, PNG, and TIFF. A file dialog will pop up for choosing the
              file name.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Page setup</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Set up the page layout for printing, e.g.,
              portrait or landscape, margins, etc.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Print diagram preview</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Preview the print out of the current diagram
              based on the current page layout.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Print diagram</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Print the current diagram. Depending on the page
              layout and the dimension of the canvas, the print out may
              consists of several pages.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Exit</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Exit 
              <i>@APPNAME@</i>.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The Project Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0">
          <tr>
            <td valign="top" width="125">
              <b>New project</b>
            </td>
            <td width="14"></td>
            <td>Start a new project</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Open project</b>
            </td>
            <td width="14"></td>
            <td>Load a previously saved project from a project
            file. A file dialog will pop up for choosing the project file to be
            loaded.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Save project</b>
            </td>
            <td width="14"></td>
            <td>Save the current project to its current project
            file.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Save project as</b>
            </td>
            <td width="14"></td>
            <td>Save the current project to a different project
            file. A file dialog will pop up for choosing the new project file
            name.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Open project archive</b>
            </td>
            <td width="14"></td>
            <td>Load a project from a project archive file created
            previously. A file dialog will pop up for choosing the project
            archive file to be loaded.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Save project archive</b>
            </td>
            <td width="14"></td>
            <td>Save the current project as a project archive in
            its default archive file.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Save project archive as</b>
            </td>
            <td width="14"></td>
            <td>Save the current project as a project archive in a
            different archive file. A file dialog will pop up for choosing the
            new project archive file name.</td>
          </tr>
          <tr>
            <td valign="top">
              <b>Close project</b>
            </td>
            <td width="14"></td>
            <td>Close the current project. The current project will
            be removed from the project panel, and all the diagrams contained
            in the project are also closed and removed from the canvas
            window.</td>
          </tr>
        </table>
      </div>
      <h4 class="c5">The Edit Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Copy</b>
              </td>
              <td width="17"></td>
              <td>Make a copy of the selected shape, which can be
              pasted to this or other diagrams one or more times.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Cut</b>
              </td>
              <td width="17">
                <br />
              </td>
              <td>Cut the selected shape from the current diagram.It can be
		pasted back to this or other diagram one or more times.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Paste</b>
              </td>
              <td width="17">
                <br />
              </td>
              <td>Paste the shape previously copied or cut to the current diagram.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Undo</b>
              </td>
              <td width="17">
                <br />
              </td>
              <td>Undo one or more editing actions, in the reverse
              order in which they were performed. There is no limit in the
              number of actions that can be undone.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Redo</b>
              </td>
              <td width="17">
                <br />
              </td>
              <td>Redo one or more editing actions that have been
              previously undone, in the reverse order in which they were
              undone.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The View Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Zoom in</b>
              </td>
              <td width="12"></td>
              <td>Zoom in on the current diagram.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Zoom out</b>
              </td>
              <td width="12"></td>
              <td>Zoom out on the current diagram.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Restore (1:1)</b>
              </td>
              <td width="12"></td>
              <td>Restore the current diagram to its natural scale (1:1).</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fit width</b>
              </td>
              <td width="12"></td>
              <td>Scale the current diagram to fit the width of the canvas.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fit height</b>
              </td>
              <td width="12"></td>
              <td>Scale the current diagram to fit the height of the canvas.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fit window</b>
              </td>
              <td width="12"></td>
              <td>Scale the current diagram to the best fit the canvas.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Refresh</b>
              </td>
              <td width="12"></td>
              <td>Refresh the current diagram shown in the canvas.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The Format Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Colors</b>
              </td>
              <td width="12"></td>
              <td>Choose the color of the pen, i.e., the foreground
              color, for drawing.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fill &amp; gradient</b>
              </td>
              <td width="12"></td>
              <td>Choose the fill
		color or gradient pattern for the background.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fonts</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Choose the font family, the size, and the style
              (plain, italic, bold) for rendering text.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Line styles and arrows</b>
              </td>
              <td width="12"></td>
              <td valign="top">Choose the line style (solid or
              dashed), the line thickness, and the arrow types.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Align vertical</b>
              </td>
              <td width="12"></td>
              <td>Align the selected shapes vertically. Use the
              sub-menus to indicate the alignment options:
              <b>Left</b>, 
              <b>Center</b>, or 
              <b>Right</b>.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Align horizontal</b>
              </td>
              <td width="12"></td>
              <td>Align the selected shapes horizontally. Use the
              sub-menus to indicate the alignment options:
              <b>Top</b>, 
              <b>Center</b>, or 
              <b>Bottom</b>.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The Properties Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Project properties</b>
              </td>
              <td width="12"></td>
              <td>Set the project properties, e.g., the project
              type, project title, etc.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Diagram properties</b>
              </td>
              <td width="12"></td>
              <td>Set the diagram properties, e.g., the author and
              title of the diagram.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Canvas properties</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Set the canvas properties, e.g., the dimension
              and margins of the canvas.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Background</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Set the background of the canvas, e.g., turning
              grid on/off, setting grid size and style.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The Options Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Show rulers</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Show or hide the rulers.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Anti-aliasing</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Use anti-aliasing in rendering all shapes.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>Fractional metrics</b>
              </td>
              <td width="12">
                <br />
              </td>
              <td>Use factional metrics in rendering text.</td>
            </tr>
          </tbody>
        </table>
      </div>
      <h4 class="c5">The Help Menu</h4>
      <div class="c2">
        <table border="0" cellpadding="2" cellspacing="0" width="712">
          <tbody>
            <tr>
              <td valign="top" width="125">
                <b>Help</b>
              </td>
              <td width="14"></td>
              <td width="605">Display help documentations.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>License</b>
              </td>
              <td width="14">
                <br />
              </td>
              <td width="605">Display License information and update
              license.</td>
            </tr>
            <tr>
              <td valign="top">
                <b>About</b>
              </td>
              <td width="14">
                <br />
              </td>
              <td width="605">Display information about @APPNAME@.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <h3>
      <a name="sec-3.5">3.5 The Information Icons</a>
    </h3>

    <div class="c2">There are three information icons (from left to right) the
    modification icon
    (<img src="images/Icons/unedited.png" alt="unedited" align="bottom"
    border="0" /> or 
    <img src="images/Icons/edited.png" alt="edited" align="bottom"
    border="0" />), the diagram information icon
    (<img src="images/Icons/info.png" alt="doc prop" align="bottom"
    border="0" />), and the overview icon 
    (<img src="images/Icons/thumbview.png" alt="overview" align="bottom"
    border="0" />).
    <ul>
      <li>The modification icon shows whether the current diagram has been modified since 
	it was last saved. The icon 
	<img src="images/Icons/edited.png" alt="edited" align="bottom" border="0" /> 
	indicates that it is unmodified, and the icon 
	<img src="images/Icons/unedited.png" alt="unedited" align="bottom" border="0" /> 
	indicates that it is modified.</li>
      <li>When the mouse pointer hovers over the diagram information icon ( 
	<img src="images/Icons/info.png" alt="doc prop" align="bottom" border="0" />), 
	a pop-up window showing the information of the current
	diagram will appear. The pop-up window will disappear
	when the mouse pointer moves away from the diagram information icon.</li>
      <li>When the mouse pointer hovers over the overview icon ( 
	<img src="images/Icons/thumbview.png" alt="overview" align="bottom" border="0" />) 
	a pop-up window displaying a thumbnail overview of the entire
	diagram will appear. The pop-up window will disappear when the mouse pointer
	moves away from the overview icon.</li>
    </ul></div>


    <h3>
      <a name="sec-3.5">3.6 Closable Panels</a>
    </h3>

    <div class="c2">
      The navigator panel, attribute inspector panel, template panel,
      and stencil panel are closable. Each of these panels has a close
      button with the close panel icon 
      (<img src="images/Icons/min_view.gif" alt="close button" align="bottom" border="0" />) 
      at the upper right
      corner. Click on the close button will close the panel and an
      icon representing the panel will be docked on the status bar to
      the left of the mouse location indicator.

      <table border="0" cellpadding="2" cellspacing="0">
        <tbody>
          <tr>
            <td valign="top">
	      <img src="images/Windows/close-button.png" alt="" 
		   align="top" border="0" />) 
            </td>
            <td width="14"></td>
            <td>
	      <img src="images/Windows/closed-panel.png" alt="" 
		   align="top" border="0" />) 
	    </td>
          </tr>

          <tr>
            <td valign="top">
	      a) The stencil panel with the close button.
            </td>
            <td width="14"></td>
            <td>
	      b) The icon representing the closed stencil panel docked on the status bar.
	    </td>
          </tr>
	</tbody>
      </table>
    </div>

    <hr />
    <div class="c6">
    <a href="#top">Top</a> | 
    <a href="Guide.html">Table of Contents</a> | 
    <a href="Guide2.html">Previous</a> | 
    <a href="Guide4.html">Next</a> | 
    <a href="TopicIndex.html">Topic Index</a></div>
    <div class="c7">Copyright © @COPYYEAR@ @COPYRIGHT@</div>
  </body>
</html>
